<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet " href="../static/video/css/videoHome.css " th:href="@{/video/css/videoHome.css}" />
    <link rel="stylesheet " href="../static/video/asset/layui-v2.4.5/css/layui.css" th:href="@{/video/asset/layui-v2.4.5/css/layui.css}"/>
</head>

<body>
    <div class="layui-layout layui-layout-admin">
        <!--视频展示区  -->
        <div class="work-area">
            <!-- <span id="manufacturerType-span" hidden="hidden">cameraLIVE</span> -->

            <div class="layui-row">
                <div class="video_wrap">
                    <div class="video_left">
                        <div id="video_a1" class="video_a">
                            <div class="ActiveX" style="width: 100%; height: 100%; display: block;" id="liveVideoDiv"
                                hidden="hidden">
                                <div class="download-control"></div>
                                <div id="liveVideo" style="width: 100%;height: 100%;">
                                    <div class="video-div">
                                        <span class="video-name" id="video_title_1"></span>
                                        <div id="video_1" style="position: relative;">
                                            <!-- <div>
                                                <video id='videoPlay_1' width=100% height=100% name="videoPlay" controls
                                                    playsInline webkit-playsinline autoplay muted
                                                    style="object-fit: fill">
                                                    <source src="movie.ogg" type="video/ogg">
                                                </video>
                                            </div> -->
                                        </div>
                                    </div>
                                    <div class="video-div">
                                        <span class="video-name" id="video_title_2"></span>
                                        <div id="video_2" style="position: relative;">
                                            <!-- <div>
                                                <video id='videoPlay_2' width=100% height=80% name="videoPlay" controls
                                                    playsInline webkit-playsinline autoplay muted
                                                    style="object-fit: fill">
                                                    <source src="movie.ogg" type="application/x-mpegURL">
                                                    <source src="movie.ogg" type="video/ogg">
                                                </video>
                                            </div> -->
                                        </div>
                                    </div>
                                    <div class="video-div">
                                        <span class="video-name" id="video_title_3"></span>
                                        <div id="video_3" style="position: relative;">
                                            <!-- <div>
                                                <video id='videoPlay_3' width=100% height=100% name="videoPlay" controls
                                                    playsInline webkit-playsinline autoplay muted
                                                    style="object-fit: fill">
                                                    <source src="movie.ogg" type="video/ogg">
                                                </video>
                                            </div> -->
                                        </div>
                                    </div>
                                    <div class="video-div">
                                        <span class="video-name" id="video_title_4"></span>
                                        <div id="video_4" style="position: relative;">
                                            <!-- <div>
                                                <video id='videoPlay_4' width=100% height=100% name="videoPlay" controls
                                                    playsInline webkit-playsinline autoplay muted
                                                    style="object-fit: fill">
                                                    <source src="movie.ogg" type="video/ogg">
                                                </video>
                                            </div> -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="video_right">
                        <div id="video_a2" class="video_a" style="position: relative">
                            <div class="video_list">
                                <div class="header">视频设备列表</div>
                                <div class="video_list-content nui-scroll">
                                    <div class="video_list-main">
                                        <ul id="videoList_ul">
                                            <li class="videoList_li">
                                                <a href="javascript:void(0)">
                                                    <img class="video_file" src="./images/zhgd_video_file.png">&ensp;
                                                    <span class="word">陵水住建工地一区</span>
                                                </a>
                                                <ul>
                                                    <li data-id="1">
                                                        <a href="javascript:void(0);">
                                                            <span class="video_word">工地一区摄像头1</span>
                                                        </a>
                                                    </li>
                                                    <li data-id="2">
                                                        <a href="javascript:void(0);">
                                                            <span class="video_word">工地一区摄像头2</span>
                                                        </a>
                                                    </li>
                                                    <li data-id="3">
                                                        <a href="javascript:void(0);">
                                                            <span class="video_word">工地一区摄像头3</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                                </a>
                                            </li>
                                            <li class="videoList_li">
                                                <a href="javscript:void(0)">
                                                    <img class="video_file" src="./images/zhgd_video_file.png">&ensp;
                                                    <span class="word">陵水住建工地二区</span>
                                                </a>
                                                <ul>
                                                    <li data-id="4">
                                                        <a href="javascript:void(0);">
                                                            <span class="video_word">工地二区摄像头1</span>
                                                        </a>
                                                    </li>
                                                    <li data-id="5">
                                                        <a href="javascript:void(0);">
                                                            <span class="video_word">工地二区摄像头2</span>
                                                        </a>
                                                    </li>
                                                    <li data-id="6">
                                                        <a href="javascript:void(0);">
                                                            <span class="video_word">工地二区摄像头3</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                                </a>
                                            </li>
                                            <li class="videoList_li">
                                                <a href="javscript:void(0)">
                                                    <img class="video_file" src="./images/zhgd_video_file.png">&ensp;
                                                    <span class="word">陵水住建工地三区</span>
                                                </a>
                                                <ul>
                                                    <li data-id="7">
                                                        <a href="javascript:void(0);">
                                                            <span class="video_word">工地三区摄像头1</span>
                                                        </a>
                                                    </li>
                                                    <li data-id="8">
                                                        <a href="javascript:void(0);">
                                                            <span class="video_word">工地三区摄像头2</span>
                                                        </a>
                                                    </li>
                                                    <li data-id="9">
                                                        <a href="javascript:void(0);">
                                                            <span class="video_word">工地三区摄像头3</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div id="VideoStyleChangeDiv">
                                    <div>
                                        <form class="layui-form">
                                            <span class="selectDIV">选择窗口布局:</span>
                                            <div class="btnDiv">
                                                <button class=" layui-btn layui-btn-sm btn-reset" type="reset"
                                                    onclick="VideoStyleChange(2,2)">2X2</button>
                                                <button class="layui-btn layui-btn-sm btn-reset" type="reset"
                                                    onclick="VideoStyleChange(3,3)">3X3</button>
                                                <button class="layui-btn layui-btn-sm btn-reset" type="reset"
                                                    onclick="VideoStyleChange(4,4)">4X4</button>
                                            </div>

                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="videoControl"></div>
            </div>
        </div>
    </div>
    <script src="../static/video/asset/jquery/jquery-3.3.1.min.js" th:src="@{/video/asset/jquery/jquery-3.3.1.min.js}"></script>
    <script src="../static/video/asset/layui-v2.4.5/layui.js" th:src="@{/video/asset/layui-v2.4.5/layui.js}"></script>
    <!--UIKit JavaScript是用于WEB端，移动H5端的JavaScript插件  -->
    <script src="../static/video/js/plugins/liveVideo/ezuikit.js" th:src="@{/video/js/plugins/liveVideo/ezuikit.js}"></script>
    <script src="../static/video/js/video-render.js" th:src="@{/video/js/video-render.js}"></script>
</body>

</html>